<template>
    <div class="all">
        <div class="title"> >>>套餐一览</div>
        <div class="search">
            <input class="search_input" v-model="value" placeholder="请输入关键词" type="text">
            <button class="search_btn" @click="searchBtn">搜索</button>
        </div>
        <div class="search_main">
            <div class="search_list">
                <div class="search_name">价格</div>
                <div class="search__option_box">
                    <div class="search__option">
                        <ul>
                            <li v-for="(item, index) in prices"   
                                :key="index"   
                                :class="{ active: activeIndex1 === index }"   
                                @click="setActive1(index,item)"   
                            >
                                {{item}}
                            </li>
                            
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <div class="search_main">
            <div class="search_list">
                <div class="search_name">套餐</div>
                <div class="search__option_box">
                    <div class="search__option">
                        <ul>
                            <li v-for="(item, index) in items"   
                                :key="index"   
                                :class="{ active: activeIndex2 === index }"   
                                @click="setActive2(index,item)"
                            >
                                {{item}}
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <div class="info">
            <ul>
                <li v-for="(item, index) in infoData"  
                :key="index" 
                @click="lookCombination(item)"
                >
                    <div><img :src=infoData[index].combinationImg></div>
                    <div style="text-align: left">
                        <p class="name">{{ infoData[index].combinationName }}</p>
                        <p class="price">价格：{{ infoData[index].combinationPrice }} ￥</p>
                        <p class="intro">简介：{{ infoData[index].combinationIntro }}</p>
                    </div>
                </li>
            </ul>
        </div>
        <!-- 分页 -->
        <el-pagination
            background
            @current-change="handleCurrentChange"  
            :current-page="page.currentPage" 
            :page-size="page.pageSize"
            layout="prev, pager, next"
            :total="page.total"
            style="display: block; width: 100%;"  
            >
        </el-pagination>
    </div>
</template>
<script>
export default {
    data(){
        return{
            prices:['不限','100元以下','100~300元','300~500元','500~1000元','1000元以上'],
            items:['不限','关爱套餐','优选套餐','守护套餐','臻爱套餐','女性健康套餐'],
            activeIndex1: 0, // 初始时没有元素被激活
            activeIndex2: 0, // 初始时没有元素被激活
            page:{
                currentPage: 1,  
                pageSize:4,
                total:0
            },
            infoData:[],
            value:"",
            combination:"不限",
            priceBorder:"不限",
            click :0,
        }
    },
    created(){
        this.getAllCombination()
    },
    methods:{
        setActive1(index,item) {  
            this.activeIndex1 = index; // 更新当前激活的索引
            this.priceBorder = item  
            this.searchBtn();

        },
        setActive2(index,item) {  
            this.activeIndex2 = index; // 更新当前激活的索引  
            this.combination = item
            this.searchBtn();

        },
        handleCurrentChange(newPage) {  
            //在这里可以根据新的页码进行数据的加载或其他操作  
            this.page.currentPage = newPage; // 更新当前页码，如果需要进行页面数据更新的话  
            if(this.click == 0){
                this.getAllCombination();
            }else{
                this.searchBtn();
            }
            
        },
        getAllCombination(){
            this.click = 0
            this.$axios.post(
                '/combination/getAllCombination',
                {
                    pageCurr:this.page.currentPage,  
                    pageSize:this.page.pageSize,
                }
            ).then(res =>{
                if(res != undefined){
                    if(res.code == 1){
                        console.log("项目列表",res)
                        this.infoData = res.data.list
                        this.page.total = res.data.totalSize
                    }else{
                        alert("服务器出错")
                    }
                }
                
                
            })
        },
        searchBtn(){
            this.click = 1
            //关键词搜索
            //联合搜索 ---》关键词搜索，项目名，价格搜索
            if(this.value == ''){
                //判断一下是否为空，为空则就赋值为“不限”，要不然后端会报错
                this.value = "不限"
            }
            this.$axios.get(
            
                '/combination/searchInfo',
                {
                    params:{
                        value:this.value,
                        combination:this.combination,
                        price:this.priceBorder,
                        pageCurr:this.page.currentPage,  
                        pageSize:this.page.pageSize,
                    }
                }
            ).then(res =>{
                if(res!=undefined){
                    if(res.code == 1){
                        console.log("项目列表",res)
                        this.infoData = res.data.list
                        this.page.total = res.data.totalSize
                        console.log(this.infoData)
                    }else{
                        alert("服务器出错")
                    }
                }
                
            })
        },
        lookCombination(item){
            localStorage.setItem("combinationItem",JSON.stringify(item));
            this.$router.push('/menu/combination')
        },
        
    }
}
</script>
<style scoped>
    @import "../../../static/css/billing.css";

</style>